<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Menus &amp; toolbars in Qyoto</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, menu, Qt, toolbar, Qyoto, Visual Basic">
<meta name="description" content="Menus &amp; toolbars in Qyoto">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Menus &amp; toolbars in Qyoto</h1>

<p>
In this part of the Visual Basic Qyoto programming tutorial, we will 
work with menus and toolbars. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 

<p>
A menubar is one of the most visible parts of the GUI application. 
It is a group of commands located in various menus. While in console 
applications you had to remember all those arcane commands, here we have 
most of the commands grouped into logical parts. There are accepted standards
that further reduce the amount of time spending to learn a new application.
Menus group commands that we can use in an application. 
Toolbars provide a quick access to the most frequently used commands.
</p>


<h2>Simple menu</h2>

<p>
The first example will show a simple menu. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' This program shows a simple
' menu. It has one action, which
' will terminate the program, when
' selected. 
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
    Inherits QMainWindow

    Public Sub New()
    
        Me.SetWindowTitle("Simple menu")
    
        Me.InitUI()
        
        Me.Resize(250, 200)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub
    
    Private Sub InitUI()
    
        Dim quit As New QAction("&amp;Quit", Me)

        Dim file As QMenu = Me.MenuBar().AddMenu("&amp;File")
        file.AddAction(quit)

        Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"))
    
    End Sub


    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app as New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
We have a menubar, a menu and an action. In order to work with menus,
we must inherit from <b class="keyword">QMainWindow</b> widget. 
</p>

<pre class="explanation">
Dim quit As New QAction("&amp;Quit", Me)
</pre>

<p>
This code line creates a <b class="keyword">QAction</b>. Each <b class="keyword">QMenu</b> 
has one or more action objects. Note the ampersand (&amp;) character. It creates a 
shortcut for the item. Alt + Q. It also underlines the Q character. 
The shortcut is active, when the file menu is dropped down. 
</p>

<pre class="explanation">
Dim file As QMenu = Me.MenuBar().AddMenu("&amp;File")
file.AddAction(quit)
</pre>

<p>
We create a <b class="keyword">QMenu</b> object. The ampersand character creates a shortcut. Alt + F. 
The consecutive shortcuts Alt + F, Alt + Q quit the application. 
</p>

<pre class="explanation">
Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"))
</pre>

<p>
When we select this option from the menu, the application quits. 
</p>

<br>
<img src="/img/gui/vbqyoto/simplemenu.png" alt="Simple menu">
<div class="figure">Figure: Simple menu</div>

<h2>Creating a submenu</h2>

<p>
A submenu is a menu plugged into another menu object. The next example demonstrates this. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' This program creates 
' a submenu
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
    Inherits QMainWindow

    Public Sub New()
    
        Me.SetWindowTitle("Submenu")
    
        Me.InitUI()
        
        Me.Resize(280, 200)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub
    
    Private Sub InitUI()
    
        Dim quit As New QAction("&amp;Quit", Me)

        Dim file As QMenu = MenuBar().AddMenu("&amp;File")
        Dim impm As New QMenu("Import")

        Dim seeds As New QAction("Import news feed...", Me)
        Dim marks As New QAction("Import bookmarks...", Me)
        Dim mail As New QAction("Import mail...", Me)
        
        impm.AddAction(seeds)
        impm.AddAction(marks)
        impm.AddAction(mail)
        
        file.AddMenu(impm)
        file.AddAction(quit)

        Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"))
    
    End Sub


    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app As New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
In the example, we have three options in a submenu of a file menu. 
</p>

<pre class="explanation">
Dim file As QMenu = MenuBar().AddMenu("&amp;File")
Dim impm As New QMenu("Import")
</pre>

<p>
We have two <b class="keyword">QMenu</b> objects. The file menu and the import menu. 
</p>

<pre class="explanation">
Dim seeds As New QAction("Import news feed...", Me)
Dim marks As New QAction("Import bookmarks...", Me)
Dim mail As New QAction("Import mail...", Me)
</pre>

<p>
We create three action objects.  
</p>

<pre class="explanation">
impm.AddAction(seeds)
impm.AddAction(marks)
impm.AddAction(mail)
</pre>

<p>
We add the action objects into the import menu. 
</p>

<pre class="explanation">
file.AddMenu(impm)
</pre>

<p>
Finally, we add the import menu into the file menu. 
</p>

<br>
<img src="/img/gui/vbqyoto/submenu.png" alt="Submenu">
<div class="figure">Figure: Submenu</div>



<h2>Images, menus, separators</h2>

<p>
In the following example, we will further enhance our previous application. 
We will add icons to the menus, use shortcuts and a separator. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' This program shows image
' menu items, a shorcut and a separator
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
    Inherits QMainWindow

    Public Sub New()
    
        Me.SetWindowTitle("Image menu")
    
        Me.InitUI()
        
        Me.Resize(280, 200)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub
    
    Private Sub InitUI()
    
        Dim newpix As New QIcon("new.png")
        Dim openpix As New QIcon("open.png")
        Dim quitpix As New QIcon("quit.png")

        Dim newa As New QAction(newpix, "&amp;New", Me)
        Dim open As New QAction(openpix, "&amp;Open", Me)
        Dim quit As New QAction(quitpix, "&amp;Quit", Me)

        quit.Shortcut = New QKeySequence("Ctrl+Q")    

        Dim file As QMenu = MenuBar().AddMenu("&amp;File")
        file.AddAction(newa)
        file.AddAction(open)
        file.AddSeparator()
        file.AddAction(quit)

        Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"))
    
    End Sub


    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app As New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
In our example, we have one menu with three actions. Only the quit action will 
actually do something, if we select it. We also create a separator and a Ctrl + Q shortcut,
which will terminate the application. 
</p>

<pre class="explanation">
Dim newpix As New QIcon("new.png")
Dim openpix As New QIcon("open.png")
Dim quitpix As New QIcon("quit.png")
</pre>

<p>
These are png images, that we will use in the application. 
</p>

<pre class="explanation">
Dim newa As New QAction(newpix, "&amp;New", Me)
Dim open As New QAction(openpix, "&amp;Open", Me)
Dim quit As New QAction(quitpix, "&amp;Quit", Me)
</pre>

<p>
Here we create three action objects. The first parameter is the <b class="keyword">QIcon</b>.
</p>

<pre class="explanation">
quit.Shortcut = New QKeySequence("Ctrl+Q") 
</pre>

<p>
This line creates a shortcut. By pressing this shortcut, we will run the quit action, 
which will terminate the application. 
</p>

<pre class="explanation">
file.AddSeparator()
</pre>

<p>
We create a separator. The separator is a horizontal line, which enables us to group menu actions 
into some logical parts. 
</p>


<br>
<img src="/img/gui/vbqyoto/imshsep.png" alt="Images, shortcut and a separator">
<div class="figure">Figure: Images, shortcut and a separator</div>



<h2>A toolbar</h2>

<p>
The <b class="keyword">QToolBar</b> class provides a movable panel that contains a
set of controls, which provide a quick access to the application actions. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' This program creates a 
' toolbar
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
    Inherits QMainWindow

    Public Sub New()
    
        Me.SetWindowTitle("Toolbar")
    
        Me.InitUI()
        
        Me.Resize(280, 200)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub
    
    Private Sub InitUI()
    
        Dim newpi As New QIcon("new.png")
        Dim openpi As New QIcon("open.png")
        Dim quitpi As New QIcon("quit.png")

        Dim toolbar As QToolBar = AddToolBar("main toolbar")
        toolbar.AddAction(newpi, "New File")
        toolbar.AddAction(openpi, "Open File")
        toolbar.AddSeparator()
        Dim quit As QAction = toolbar.AddAction(quitpi, _
            "Quit Application")

        Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"))
    
    End Sub


    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app as New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
We create a toolbar with three action objects and one separator. 
</p>

<pre class="explanation">
Dim newpi As New QIcon("new.png")
Dim openpi As New QIcon("open.png")
Dim quitpi As New QIcon("quit.png")
</pre>

<p>
Toolbar action objects will display these icons.
</p>

<pre class="explanation">
Dim toolbar As QToolBar = AddToolBar("main toolbar")
</pre>

<p>
The <b class="keyword">AddToolBar()</b> method of the <b class="keyword">QMainWindow</b> class
creates a toolbar for the application. The text string gives a toolbar a name. This name
is used to reference this toolbar, because there can be multiple toolbars in one application.
If we right click on the window area, we can see a checkable option, which shows/hides the
toolbar. 
</p>

<pre class="explanation">
toolbar.AddSeparator()
</pre>

<p>
We create a vertical separator.
</p>

<pre class="explanation">
Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"))
</pre>

<p>
When we click on the quit action object, the application terminates. 
</p>

<br>
<img src="/img/gui/vbqyoto/toolbar.png" alt="Toolbar">
<div class="figure">Figure: Toolbar</div>


<h2>Undo redo</h2>

<p>
The following example demonstrates, how we can deactivate toolbar buttons 
on the toolbar. It is a common practice in GUI programming. For example 
the save button. If we save all changes of our document to the disk,
the save button is deactivated in most text editors. This way the 
application indicates to the user, that all changes are already saved. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Qt tutorial
'
' This program disables/enables
' toolbuttons on a toolbar
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
    Inherits QMainWindow

    Dim clicks As Integer = 0
    Dim undoButton As QToolButton
    Dim redoButton As QToolButton

    Public Sub New()
    
        Me.SetWindowTitle("Undo redo")
    
        Me.InitUI()
        
        Me.Resize(280, 200)
        Me.Move(300, 300)
        Me.Show()
        
    End Sub
    
    Private Sub InitUI()
    
        Dim undoi As New QIcon("undo.png")
        Dim redoi As New QIcon("redo.png")
        Dim quitpi As New QIcon("quit.png")

        Dim toolbar As New QToolBar
        undoButton = New QToolButton
        redoButton = New QToolButton

        Dim undoAction As New QAction(undoi, "Undo", undoButton)
        Dim redoAction As New QAction(redoi, "Redo", redoButton)

        undoButton.SetDefaultAction(undoAction)
        redoButton.SetDefaultAction(redoAction)

        toolbar.AddSeparator()
        toolbar.AddWidget(undoButton)
        toolbar.AddWidget(redoButton)

        Dim quit As QAction = toolbar.AddAction(quitpi, "Quit Application")
        
        Connect(quit, SIGNAL("triggered()"), qApp, SLOT("quit()"))
        
        Connect(undoButton, SIGNAL("triggered(QAction*)"), _
            Me, SLOT("Count(QAction*)"))
        Connect(redoButton, SIGNAL("triggered(QAction*)"), _
            Me, SLOT("Count(QAction*)"))

        AddToolBar(toolbar)

    End Sub

    &lt;Q_SLOT()&gt; _
    Private Sub Count(ByVal action As QAction)
        
        If "Undo".Equals(action.Text)
            clicks -= 1
        Else 
            clicks += 1
        End If
  
        If clicks <= 0 
            undoButton.SetDisabled(True)
            redoButton.SetDisabled(False)
        End If

        If clicks >= 5 
            undoButton.SetDisabled(False)
            redoButton.SetDisabled(True)
        End If
       
    End Sub


    Public Shared Sub Main(ByVal args() As String)
        Dim qapp As New QApplication(args)
        Dim app As New VBQApp
        QApplication.Exec()
    End Sub

End Class
</pre>

<p>
In our example, we have three <b class="keyword">QAction</b> objects and a separator.
After several clicks on the undo or redo buttons, they become deactivated. Visually, the buttons 
are grayed out. 
</p>

<pre class="explanation">
Dim clicks As Integer = 0
</pre>

<p>
The clicks variable determines, which button is activated or deactivated. 
</p>

<pre class="explanation">
Connect(undoButton, SIGNAL("triggered(QAction*)"), _
    Me, SLOT("Count(QAction*)"))
Connect(redoButton, SIGNAL("triggered(QAction*)"), _
    Me, SLOT("Count(QAction*)"))
</pre>

<p>
Clicking on the toolbar button, the <b class="keyword">triggered()</b> signal is emitted.
We connect this signal to the <b class="keyword">Count()</b> method. It receives the <b class="keyword">QAction</b>
object, which triggered it.
</p>


<pre class="explanation">
If "Undo".Equals(action.Text)
    clicks -= 1
Else 
    clicks += 1
End If
</pre>

<p>
The undo toolbar button subtracts 1 from the clicks variable. The 
redo adds 1. Depending on the value of the clicks variable, we enable/disable
the toolbar buttons.
</p>

<pre class="explanation">
If clicks <= 0 
    undoButton.SetDisabled(True)
    redoButton.SetDisabled(False)
End If
</pre>

<p>
The <b class="keyword">SetDisabled()</b> method activates or deactivates the
toolbar buttons. 
</p>

<br>
<img src="/img/gui/vbqyoto/undoredo.png" alt="Undo redo">
<div class="figure">Figure: Undo redo</div>

<hr class="btm">

<p>
In this part of the Visual Basic Qyoto tutorial, we mentioned the menus and toolbars. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br> 

<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified May 17, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
